﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="scripts/function.js"></script>
	<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
	<style type="text/css">
		.small,.large{
			font-size: 0;
			outline: 1px solid burlywood;
			margin: auto;
		}
		.large,.small{
			margin: 20px auto;
		}
		.large{
			margin-left: 40px;
			position: absolute;
			display: none;
			z-index: 10;
		}
		.small,.small img,.large{
			width: 256px;
			height: 256px;
			overflow: hidden;
		}
		.large img{
			width: 900px;
			height: 600px;
		}
		.small{
			position: relative;
			display: inline-block;
		}
		.mark{
			opacity: 0.5;
			background-color: #DEB887;
			z-index: 55;
			width: 100px;
			height: 66.666666666px;
			display: none;
		}
		.mark,.large img{
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<style type="text/css">
		.open {
			height: auto;
			overflow: visible;
		}
		dt {
			height: 16px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif" /></div>
    <div class="help"><a href="GetUserShoppingServlet" class="shopping">购物车</a>欢迎${Curr_User.username}<a href="ZhuXiaoServlet">切换用户</a><a href="guestbook.html">留言</a></div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="index.jsp">首页</a></li>
            <li><a href="GetProductServlet?epcname=图书">图书</a></li>
            <li><a href="GetProductServlet?epcname=百货">百货</a></li>
            <li><a href="GetProductServlet?epcname=品牌">品牌</a></li>
            <li><a href="GetProductServlet?epcname=促销">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="GetProductServlet?epcname=音乐">音乐</a></li>
            <li><a href="GetProductServlet?epcname=影视">影视</a></li>
            <li><a href="GetProductServlet?epcname=少儿">少儿</a></li>
            <li><a href="GetProductServlet?epcname=动漫">动漫</a></li>
            <li><a href="GetProductServlet?epcname=小说">小说</a></li>
            <li><a href="GetProductServlet?epcname=外语">外语</a></li>
            <li><a href="GetProductServlet?epcname=相机">数码相机</a></li>
            <li><a href="GetProductServlet?epcname=笔记本">笔记本</a></li>
            <li><a href="GetProductServlet?epcname=羽绒服">羽绒服</a></li>
            <li><a href="GetProductServlet?epcname=秋冬靴">秋冬靴</a></li>
            <li><a href="GetProductServlet?epcname=运动鞋">运动鞋</a></li>
            <li><a href="GetProductServlet?epcname=化妆品">美容护肤</a></li>
            <li><a href="GetProductServlet?epcname=家纺用品">家纺用品</a></li>
            <li><a href="GetProductServlet?epcname=奶粉">婴幼奶粉</a></li>
            <li><a href="GetProductServlet?epcname=饰品">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
	您现在的位置：<a href="index.jsp">易买网</a> &gt; <span id="psv"><%--${epcname}--%></span>
	<div class="wrap" style="width: 300px; margin-left: 100px; float: right; position: relative; right: -8em">
		<ul class="clearfix">
			<form action="GetProListByName" method="post">
				<input type="text" name="keyword" size="20" style="font-size: 1.5em"/><input type="submit" value="搜索" style="font-size: 1.4em"/>
			</form>
		</ul>
	</div>
</div>
<div id="main" class="wrap">
	<div class="lefter">
		<div class="box">
			<h2>商品分类</h2>
			<div id="cglist"></div>
		</div>
	</div>
	<div id="product" class="main">
		<h1 >${products.epname}</h1>
		<div class="infos">
			<div class="thumb">
				<div class="small">
					<img src="images/product/${products.eppicturename}" />
					<div class="mark"></div>
				</div>
				<div class="large">
					<img src="images/product/${products.eppicturename}" />
				</div>
			</div>

			<div class="buy">
				<p>商城价：<span class="price">￥${products.price}</span></p>
				<p>库　存：${products.epstock}</p>

				<div class="button"><input type="button" name="button" value="" onclick="goBuy(${products.epid},1)" /><a href="javascript:void[0]" id="msg"onclick="goBuy(${products.epid},0)">放入购物车</a></div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="introduce">
			<h2><strong>商品详情</strong></h2>
			<div class="text">
				${products.epdesc}
				<br />
			</div>
		</div>
	</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
	Copyright &copy; 2018 云和数据 All Rights Reserved. 京ICP证1000001号
</div>
<script type="text/javascript">
    $(function(){
        var $small = $(".small"),
            $mark = $(".mark"),
            $large = $(".large");
        $small.on("mouseover",function(){
            $large.css("display","inline-block");
        }).on("mousemove",function(e){
// 在鼠标移到小图片中显示出mark ///////\\\\\\\\
            $mark.css("display","block");
// 获取mark的一半宽度高度
            var hw = $mark.width()/2,
                hh = $mark.height()/2;
// 获取鼠标在当前图片中的位置
            var lf = e.pageX-$small.offset().left-hw,
                tt = e.pageY-$small.offset().top-hh;
// 获取mark的想x,y轴偏移率
            var ix = lf/$small.width(),
                iy = tt/$small.height();
// 获取边缘线
            var lb = 1-hw/$small.width()*2,
                tb = 1-hh/$small.height()*2;
// 计算和边缘的关系
            var ix = ix<lb?ix>0?ix:0:lb,
                iy = iy<tb?iy>0?iy:0:tb;
// 进行大图和小图百分比计算
            $mark.css("left",ix*100+"%").css("top",iy*100+"%");
            $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%");
        }).on("mouseout",function(){
// 鼠标移出后mark隐藏
            $mark.css("display","none");
            $large.css("display","none");
        })
    })
</script>
</body>
</html>
<script>
    $(function () {
        $.ajax({
            type:"POST",
            url:"GetCgServlet",
            dataType:"JSON",
            success:function (data) {
                $(".dldl").remove();
                var count = 0;
                $.each(data, function (index, obj) {

                    if(obj.epcid == obj.epcpartentid){
                        if(count >0){
                            var v3 = "</dl>";
                            $("#cglist").append(v3);
                        }
                        var  v = "<dl class='dldl'><dt id='"+obj.epcid+"'><a href='javascript:void(0)?epcid="+obj.epcid+"' onclick='list(this);'>"+obj.epcname+"</a></dt>";
                        $("#cglist").append(v);
                        count++;
                    }else {
                        var v2 = "<dd><a href='#?epcid="+obj.epcid+"'>"+obj.epcname+"</a></dd>";
                        $("dt[id='"+obj.epcpartentid+"']").append(v2);
                    }
                });
                console.log("v4");
                var v4 = "</dl>";
                $("#cglist").append(v4);
            }
        });
    });

    function list(dtNode) {
        var dlNode = dtNode.parentNode;
        if (dlNode.className == "open") {
            dlNode.className = "";
        } else {
            dlNode.className = "open";
        }
    }

    function goBuy(epid ,flag) {

        location.href = "AddOrderDetailServlet";
                if(flag==1){
                    goShopping();
                }else if(flag==0){
                    $("#msg").html("已加入購物車")
                }
    }
    function goShopping() {
        location.href = "GetUserShoppingServlet";
    }
</script>